{% import "_includes/forms" as forms %}

{% set blockTypeInput %}
    <div class="mc-sidebar block-types">
        <div class="mc-col-inner-container">
            <div class="mc-col-heading">
                <h5>{{ "Block Types"|t('app') }}</h5>
            </div>
            <div class="mc-col-items">
                <div class="mc-blocktypes">
                    {% for blockTypeId, blockType in blockTypes %}
                        <div class="matrixconfigitem mci-blocktype{% if blockType.hasFieldErrors %} error{% endif %}" data-id="{{ blockTypeId }}"{% if blockType.hasErrors() %} data-errors="{{ blockType.getErrors() | json_encode }}"{% endif %}>
                            <div class="mci-name">
                                <h4>
                                    {{ blockType.name }}
                                    {% if blockType.hasFieldErrors %}
                                        <span data-icon="alert" aria-label="{{ 'Error'|t('app') }}"></span>
                                    {% endif %}
                                </h4>
                                <div class="smalltext light code">{{ blockType.handle }}</div>
                            </div>
                            <a class="settings icon{% if blockType.hasErrors() %} error{% endif %}" title="{{ 'Settings'|t('app') }}" aria-label="{{ 'Settings'|t('app') }}" role="button"></a>
                            <a class="move icon" title="{{ 'Reorder'|t('app') }}" aria-label="{{ 'Reorder'|t('app') }}" role="button"></a>
                            <input class="hidden" name="blockTypes[{{ blockTypeId }}][name]" value="{{ blockType.name }}">
                            <input class="hidden" name="blockTypes[{{ blockTypeId }}][handle]" value="{{ blockType.handle }}">
                        </div>
                    {% endfor %}
                </div>
                <button type="button" class="btn add icon">{{ "New block type"|t('app') }}</button>
            </div>
        </div>
    </div>
    <div class="mc-sidebar mc-fields">
        <div class="mc-col-inner-container hidden">
            <div class="mc-col-heading">
                <h5>{{ "Fields"|t('app') }}</h5>
            </div>
            <div class="mc-col-items">
                {% for blockTypeId, blockType in blockTypes %}
                    <div data-id="{{ blockTypeId }}" class="hidden">
                        {% for fieldId, layoutElement in blockTypeFields[blockTypeId] %}
                            {% set field = layoutElement.getField() %}
                            <div class="matrixconfigitem mci-field{% if field.hasErrors() %} error{% endif %}" data-id="{{ fieldId }}">
                                <div class="mci-name">
                                    <h4{% if layoutElement.required %} class="mci-required"{% endif %}>
                                        {%- if field.name and field.name != '__blank__' -%}
                                            {{ field.name }}
                                        {%- else -%}
                                            <em class="light">{{ '(blank)'|t('app') }}</em>
                                        {%- endif -%}
                                        {%- if field.hasErrors() %} <span data-icon="alert" aria-label="{{ 'Error'|t('app') }}"></span>{% endif -%}
                                    </h4>
                                    <div class="smalltext light code">{{ field.handle }}</div>
                                </div>
                                <a class="move icon" title="{{ 'Reorder'|t('app') }}" aria-label="{{ 'Reorder'|t('app') }}" role="button"></a>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
                <button type="button" class="btn add icon">{{ "New field"|t('app') }}</button>
            </div>
        </div>
    </div>
    <div class="mc-field-settings">
        <div class="mc-col-inner-container hidden">
            <div class="mc-col-heading">
                <h5>{{ "Field Settings"|t('app') }}</h5>
            </div>
            <div class="mc-col-items">
                {% for blockTypeId, blockType in blockTypes %}
                    <div data-id="{{ blockTypeId }}">
                        {% for fieldId, layoutElement in blockTypeFields[blockTypeId] %}
                            {% set field = layoutElement.getField() %}
                            <div data-id="{{ fieldId }}" class="hidden">
                                {% namespace 'blockTypes['~blockTypeId~'][fields]['~fieldId~']' %}
                                    {{ forms.textField({
                                        label: "Name"|t('app'),
                                        id: 'name',
                                        name: 'name',
                                        value: (field.name != '__blank__' ? field.name),
                                        errors: field.getErrors('name'),
                                        autofocus: true
                                    }) }}

                                    {{ forms.textField({
                                        label: "Handle"|t('app'),
                                        id: 'handle',
                                        name: 'handle',
                                        class: 'code',
                                        autocorrect: false,
                                        autocapitalize: false,
                                        maxlength: 64,
                                        value: field.handle,
                                        errors: field.getErrors('handle'),
                                        required: true,
                                    }) }}

                                    {{ forms.textareaField({
                                        label: "Instructions"|t('app'),
                                        id: 'instructions',
                                        class: 'nicetext',
                                        name: 'instructions',
                                        value: field.instructions,
                                        errors: field.getErrors('instructions'),
                                    }) }}

                                    <fieldset>
                                        {{ forms.checkboxField({
                                            label: "This field is required"|t('app'),
                                            id: 'required',
                                            name: 'required',
                                            checked: layoutElement.required
                                        }) }}

                                        {{ forms.checkboxField({
                                            label: 'Use this field’s values as search keywords'|t('app'),
                                            id: 'searchable',
                                            name: 'searchable',
                                            checked: field.searchable
                                        }) }}
                                    </fieldset>

                                    {{ forms.selectField({
                                        label: "Field Type"|t('app'),
                                        warning: (not field.getIsNew() and not field.hasErrors('type') ? "Changing this may result in data loss."|t('app')),
                                        id: 'type',
                                        name: 'type',
                                        options: fieldId[0:3] != 'new' ? fieldTypes[fieldId] : fieldTypes.new,
                                        value: className(field),
                                        errors: field.getErrors('type') ?? null
                                    }) }}

                                    {% if craft.app.getIsMultiSite() %}
                                        {% set translationMethods = field.supportedTranslationMethods %}
                                        <div id="translation-settings"{% if translationMethods|length < 2 %} class="hidden"{% endif %}>
                                            {{ forms.selectField({
                                                label: "Translation Method"|t('app'),
                                                id: 'translation-method',
                                                name: 'translationMethod',
                                                options: [
                                                    'none' in translationMethods ? { value: 'none', label: "Not translatable"|t('app') },
                                                    'site' in translationMethods ? { value: 'site', label: "Translate for each site"|t('app') },
                                                    'siteGroup' in translationMethods ? { value: 'siteGroup', label: "Translate for each site group"|t('app') },
                                                    'language' in translationMethods ? { value: 'language', label: "Translate for each language"|t('app') },
                                                    'custom' in translationMethods ? { value: 'custom', label: "Custom…"|t('app') }
                                                ]|filter,
                                                value: field.translationMethod,
                                                toggle: true,
                                                targetPrefix: 'translation-method-'
                                            }) }}

                                            {% if 'custom' in translationMethods %}
                                                <div id="translation-method-custom" {% if field.translationMethod != 'custom' %}class="hidden"{% endif %}>
                                                    {{ forms.textField({
                                                        label: "Translation Key Format"|t('app'),
                                                        id: 'translation-key-format',
                                                        name: 'translationKeyFormat',
                                                        value: field.translationKeyFormat,
                                                        errors: field.getErrors('translationKeyFormat')
                                                    }) }}
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    {{ hiddenInput('width', layoutElement.width, {
                                        id: 'width',
                                    }) }}
                                {% endnamespace %}

                                <hr>

                                <div class="mc-fieldtype-settings">
                                    <div>
                                        {% namespace 'blockTypes['~blockTypeId~'][fields]['~fieldId~'][typesettings]' %}
                                            {{ field.getSettingsHtml()|raw  }}
                                        {% endnamespace %}
                                    </div>
                                </div>

                                <hr>

                                <a class="error delete">{{ "Delete"|t('app') }}</a>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endset %}

<div id="matrix-configurator" class="matrix-configurator">
    {{ forms.field({
        label: "Configuration"|t('app'),
        instructions: "Define the types of blocks that can be created within this Matrix field, as well as the fields each block type is made up of."|t('app'),
        name: 'config',
        errors: matrixField.getErrors('blockTypes'),
    }, blockTypeInput) }}
</div>

{% if craft.app.getIsMultiSite() %}
    {{ forms.selectField({
        label: 'Propagation Method'|t('app'),
        instructions: 'Which sites should blocks be saved to?'|t('app'),
        id: 'propagationMethod',
        name: 'propagationMethod',
        options: [
            { value: 'none', label: 'Only save blocks to the site they were created in'|t('app') },
            { value: 'siteGroup', label: 'Save blocks to other sites in the same site group'|t('app') },
            { value: 'language', label: 'Save blocks to other sites with the same language'|t('app') },
            { value: 'all', label: 'Save blocks to all sites the owner element is saved in'|t('app') },
        ],
        value: matrixField.propagationMethod
    }) }}

    {% if matrixField.id and matrixField.propagationMethod != 'none' %}
        {% js %}
            (function() {
                var showingWarning = false;
                $("#{{ 'propagationMethod'|namespaceInputId }}").on('change', function() {
                    if ($(this).val() !== '{{ matrixField.propagationMethod }}') {
                        if (!showingWarning) {
                            $('<p/>', {'class': 'warning', text: "{{ 'Applying this change to existing blocks can take some time.'|t('app')|e('js') }}"})
                                .appendTo($("#{{ 'propagationMethod-field'|namespaceInputId }}"));
                            showingWarning = true;
                        }
                    } else if (showingWarning) {
                        $("#{{ 'propagationMethod-field'|namespaceInputId }} .warning").remove();
                        showingWarning = false;
                    }
                });
            })();
        {% endjs %}
    {% endif %}
{% endif %}

{{ forms.textField({
    label: "Min Blocks"|t('app'),
    instructions: "The minimum number of blocks the field is allowed to have."|t('app'),
    id: 'minBlocks',
    name: 'minBlocks',
    value: matrixField.minBlocks,
    size: 3,
    errors: matrixField.getErrors('minBlocks')
}) }}

{{ forms.textField({
    label: "Max Blocks"|t('app'),
    instructions: "The maximum number of blocks the field is allowed to have."|t('app'),
    id: 'maxBlocks',
    name: 'maxBlocks',
    value: matrixField.maxBlocks,
    size: 3,
    errors: matrixField.getErrors('maxBlocks')
}) }}
